<template>
    <div class="sign-up-info">
   <div class="search-content">
   <span class="span-title">提交店铺：</span>
<el-select
    v-model="store_id"
    filterable
    clearable
    remote
    reserve-keyword
    autocomplete
    placeholder="店铺名称"
    :remote-method="remoteMethod"
    @focus="fouceMethod"
    >
    <el-option
      v-for="item in wordOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      <div class="putaway-time-wrapper">
      <span class="span-title">查询时间：</span>
        <el-date-picker type="month" placeholder="" 
        v-model="month"
        format="yyyy-MM"
          value-format="yyyy-MM">
          </el-date-picker>
      </div>
     
      <el-button type="primary" @click="search" style="margin-left: 10px">搜索</el-button>
      <el-button type="primary" @click="resetSearchData">重置</el-button>
    </div>
    <!-- <div class="titlecon">成交统计</div> -->
    <div class="search-list">
        <el-table :data="listData" :height="oHeight" border>
            <el-table-column prop="serial" label="车型" width="250" align="center">
            </el-table-column>
            <el-table-column prop="zero" label="成交周期（0-29天)" width="300" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.zero==0">{{scope.row.zero }}</span>
                    <span v-if="scope.row.zero!=0" class="downloadflag"  @click="download(scope.row.serial,'zero')" >{{scope.row.zero}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="thirty" label="成交周期（30-59天)" width="200" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.thirty==0">{{scope.row.thirty}}</span>
                    <span v-if="scope.row.thirty!=0" class="downloadflag" @click="download(scope.row.serial,'thirty')">{{scope.row.thirty}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sixty" label="成交周期（60-89天)" width="200" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.sixty==0">{{scope.row.sixty}}</span>
                    <span v-if="scope.row.sixty!=0" class="downloadflag" @click="download(scope.row.serial,'sixty')" >{{scope.row.sixty}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="total" label="总计" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.total==0">{{scope.row.total}}</span>
                    <span v-if="scope.row.total!=0"  class="downloadflag" @click="download(scope.row.serial,'total')" >{{scope.row.total}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</template>
<script>
    import Tabs from '@/components/tabs/tabs'
    import {
        resize
    } from "@/common/js/height.js";
    export default {
        data() {
            return {
                listData: [],
                month: '',
                member_name: '',
                store_id: '',
                showStoreBox: false,
                 loading: false,
                 dianpuData:'',
                 search_name:'',
                 query: '',
                 wordOptions:[],
                
            };
        },
        components: {
           
        },
        created() {
            this.month =this.timeDefault();
            this.getStoreList();
           },
        mounted() {
            resize(this)
        },
        methods: {
           
            fouceMethod(){
                 let query=this.store_id;
                console.log(22222,query)
               if(query==''){
                   this.getStoreList('');
               }
            },
         remoteMethod(query) {
             console.log(1111)
             this.getStoreList(query);
         },
             getStoreList(query){
                const data = {};
				data.page = 1;
                data.eachNum = 200;
                data.storeName = query;
                data.storeUserName = '';
                this.$http.post('/admin/store/index.php?act=storeManage&op=getStoreList', data).then(res => {
                    if (res.code == 1) {
                        if (res.data  && res.data.list && res.data.list.length) {
                            this.dianpuData = res.data.list.map(function(item) {
                                return {
                                    value: item.store_id,
                                    label: item.store_name,
                                    storeUserName: item.member_name,
                                    storeLevel: item.grade_id,
                                    storeStatus: item.store_state,
                                    store_end_time:item.store_end_time
                                }
                            });
                        } else {
                            this.dianpuData = [];
                        }
                    }
                    else if (res.code == 2001) {
                        this.dianpuData = [];
                    }
                    else {
                        alert(res.msg);
                    }
                    this.wordOptions=this.dianpuData;
                })
            },
            
            timeDefault() {
                let date = new Date()
                // 通过时间戳计算
                let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
                let defalutEndTime = date.getTime()
                let startDateNs = new Date(defalutStartTime)
                // 月，日 不够10补0
                defalutStartTime = startDateNs.getFullYear() + '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1))
                console.log(defalutStartTime)
                return defalutStartTime
            },
            getcjStatisticData() {
                var data = {
                    month: this.month,
                    store_id: this.store_id,
                }
                let that = this;
                 if(this.store_id==''){
                    this._message('warning', '请选择店铺');
                    return false;
                }
                this.$http.get('/admin/statistics/index.php?act=voiceStatistic&op=cjStatistic', {
                    params: data
                }).then((res) => {
                    if (res.code === 1) {
                        that.listData = res.data
                    } else {
                        this.listData = [];
                        this._message('error', res.msg);
                    }
                }).catch(err => {
                    this._message('error', err);
                })
            },
            download: function(serial, category) {
                const that = this;
                let data = {
                    month: that.month,
                     store_id: that.store_id,
                    index: category,
                     serial: serial
                };
                let domain = document.domain;
                var url = location.protocol + '//' + domain.replace('admin', 'api') + '/admin/statistics/index.php?act=voiceStatistic&op=cjStatisticExport';
              // var url = 'https://api.chejj.cn/admin/statistics/index.php?act=voiceStatistic&op=cjStatisticExport'
                for (var key in data) {
                    if (!(data[key] === null || data[key] === "" || data[key] === undefined)) {
                        url += "&" + key + "=" + data[key];
                    }
                }
              window.location.href = url
            },
       
            search() {
                this.getcjStatisticData();
            },
            resetSearchData() {
               this.month=this.timeDefault(),
                 this.store_id='';
                 this.listData=[]; 
                this.member_name='';
            },


        }
    };
</script>
<style lang="scss" scoped>
    .sign-up-info {
        .search-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-input {
                width: 200px;
            }
            .time-range-wrapper {
                .time-range-label {
                    font-size: 14px;
                }
                display: flex;
                align-items: center;
                /deep/.el-range-separator {
                    box-sizing: content-box;
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .titlecon {
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .btn-bottom {
        background: #409eff;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
    }

    .span-title {
        font-size: 14px;
        color: rgb(46, 45, 45);
    }

    .downloadflag {
        cursor: pointer;
        color: skyblue;
    }

    .nocenter {
        text-align: center;
        line-height: 60px;
        color: #909399;
        font-size: 12px;
        margin-top: 100px;
    }
</style>